<template>
  <div>
    <ContentHeader headerTitle="投诉建议" />
    <el-form
      ref="formRef"
      label-position="right"
      label-width="110px"
      :model="feedbackForm"
      :rules="rules"
      class="w-800px"
    >
      <el-form-item label="问题分类:" prop="type">
        <el-select v-model="feedbackForm.type" placeholder="请选择">
          <el-option
            v-for="item in type"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题:" prop="title">
        <el-input v-model="feedbackForm.title" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="内容" prop="question">
        <el-input
          v-model="feedbackForm.question"
          type="textarea"
          maxlength="300"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="feedbackForm.name" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="单位名称">
        <el-input v-model="feedbackForm.organ" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="手机:" prop="phone">
        <el-input v-model="feedbackForm.phone" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="feedbackForm.email" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <el-form-item>
      <el-button size="large" class="ml-110px" type="primary" @click="submit"
        >提交</el-button
      >
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { rules, type } from "./data.config.ts";
// import { add_question } from "@/api/feedback/index";

const formRef = ref();
const feedbackForm = reactive({
  name: "",
  title: "",
  question: "",
  phone: "",
  email: "",
  type: "",
  organ: "",
});

const submit = async () => {
  // await formRef.value.validate(async (valid, fields) => {
  //   if (valid) {
  //     const { code } = await add_question(feedbackForm);
  //     if (code === 200) {
  //       ElMessage({
  //         message: "提交成功.",
  //         type: "success",
  //       });
  //     } else {
  //       ElMessage({
  //         message: "提交失败!.",
  //         type: "error",
  //       });
  //     }
  //   }
  // });
};
</script>

<style scoped lang="scss">
:deep .el-form--label-right .el-form-item__label {
  width: 150px;
  font-size: 18px;
}
</style>
